<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
    <style>
    .fl{
    	float: left;
    }
    .fr{
    	float: right;
    }
    .clearfix:after{
    	clear: both;
    	display: table;
    	content: "";
    }
    	.content1{
    		height: 300px;
    		width: 600px;
    		
    	}
    	.content1 .shuoshuo1{
    		border-bottom: 1px dashed #CCCCCC;
    		height: 70px;
    		margin-top: 10px;
    		display: none;
    	}
    	.content1 img{
    		width: 60px;
    		height:60px;
    		border-radius: 50%;
    	}
    	.content1 .h4{
    		margin-top: 10px;
    		margin-left: 10px;
    		width: 320px;
    	}
    	.content1 .bankuai{
    		width: 120px;
    		margin-top: 5px;
    		font-size: 14px;
    	}
    	.content1 .time{
    		margin-top: 5px;
    		font-size: 14px;
    	}
    </style>
</head>
<body>
<div class="bbs" id="bbss">
    <header><span id="fatie">我要发帖</span></header>
    <section>
        <ul></ul>
    </section>
    <div class="post" id="post1">
        <input class="title" placeholder="请输入标题（1-50个字符）" id="title1">
        所属版块：
        <select id="xuanze">
        	<option value="请选择版块">请选择版块</option>
        	<option value="电子书籍">电子书籍</option>
        	<option value="新课来了">新课来了</option>
        	<option value="新手报到">新手报到</option>
        	<option value="职业规划">职业规划</option>
        </select>
        <textarea class="content" id="shuoshuo"></textarea>
        <input class="btn" value="发布" id="fabu" type="button">
    </div>
    <div class="content1 clearfix" id="cont">
    	<div class="shuoshuo1 clearfix" id="shuoshuo2">
    		<div class="fl picc">
    			<img src="images/tou01.jpg" id="pic"/>
    		</div>
    		<div id="biaoti" class="h4 fl">
    			<h4 id="title">如何学好前端</h4>
    			<div class="bankuai fl">
    				<span>版块：</span>
    				<span id="xuanze1">新课来了</span>
    			</div>
    			<div class="time fr">
    				<span>发表时间:</span>
    				<span id="times"></span>
    			</div>
    		</div>
    	</div>
    </div>
</div>
    <script>
    var oldss;
    var str = ["tou01","tou02","tou03","tou04"];
    	fatie.onclick = function(){
    		post1.style.display = "block";
    	};
    	fabu.onclick = function(){
    		post1.style.display = "none";
    		var title = document.getElementById("title");
    		title.innerHTML = title1.value;
    		
    		var pics = document.getElementById("pic")
    		pics.src ="images/" + str[Math.floor(Math.random()*str.length)] +".jpg";
    		

    		showTime();
    		
    		
    		
    		var xuanze1 = document.getElementById("xuanze1");
    		xuanze1.innerHTML = xuanze.value;
    		var a = document.getElementById("shuoshuo2");
    		
    		var ss = a.cloneNode(true);
    		ss.id= "";
			ss.style.display = "block";
    		title1.value = "";
    		if(document.getElementsByClassName("shuoshuo1").length>1){
    			cont.insertBefore(ss,oldss);
    		}else{
    			cont.appendChild(ss);
    		}
    		oldss = ss;
    	};
    	function showTime(){
    		var times = document.getElementById("times");
    			var now = new Date();
    			var y = now.getFullYear();
    			var m = now.getMonth()+1;
    			var d = now.getDate();
    			var h = now.getHours();
    			h = h < 10 ? "0" + h:h;
    			var f = now.getMinutes();
    			f = f < 10 ? "0" + f:f;
    			times.innerHTML = y + "-" + m + "-" + d + "&nbsp; " + h + ":" + f ;
    		};
    </script>
</div>
</body>
</html>